<template>
    <div class="balance-container">
        <h2>余额查询</h2>
        <div class="balance-card">
            <div class="balance-info">
                <div class="label">当前余额</div>
                <div class="amount">{{ balance ? `¥ ${balance.toFixed(2)}` : '加载中...' }}</div>
            </div>
            <div class="card-info">
                <div class="info-item">
                    <span class="label">卡号</span>
                    <span class="value">{{ userInfo ? userInfo.cardno : '' }}</span>
                </div>
                <div class="info-item">
                    <span class="label">持卡人</span>
                    <span class="value">{{ userInfo ? userInfo.name : '' }}</span>
                </div>
            </div>
            <div class="refresh-button">
                <button @click="fetchBalance">刷新余额</button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'balance',
    data() {
        return {
            loading: false,
            // 添加本地余额状态
            localBalance: 0
        }
    },
    computed: {
        userInfo() {
            return this.$store.state.userInfo
        },
        balance() {
            // 使用本地余额或从用户信息中获取
            return this.localBalance || (this.userInfo ? parseFloat(this.userInfo.balance) || 0 : 0)
        }
    },
    mounted() {
        if (this.userInfo) {
            this.fetchBalance()
        }
    },
    methods: {
        fetchBalance() {
            const token = this.$store.state.token;
            //http://localhost:8085/BankManage/bank/balance?cardno=1234567890123456
            this.$axios({
                method: 'get',
                url: '/bank/balance?cardno=' + this.userInfo.cardno,
                headers: {
                    'Authorization': `Bearer ${token}`
                }
            })
                .then((res) => {
                    console.log(res);
                    if (res.data.code === 0) {
                        // 更新本地余额
                        this.localBalance = parseFloat(res.data.data.balance);
                        this.$message({
                            message: '查询成功',
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: res.data.msg || '查询失败',
                            type: 'error'
                        });
                    }
                })
        }
    }
}
</script>
<style scoped>
.balance-container {
    padding: 30px;
    max-width: 800px;
    margin: 0 auto;
}

h2 {
    color: #2c3e50;
    font-size: 28px;
    margin-bottom: 30px;
    text-align: center;
}

.balance-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 30px;
    transition: transform 0.3s ease;
}

.balance-card:hover {
    transform: translateY(-5px);
}

.balance-info {
    text-align: center;
    margin-bottom: 40px;
    padding: 20px;
    background: linear-gradient(135deg, #409EFF 0%, #66b1ff 100%);
    border-radius: 12px;
    color: white;
}

.balance-info .label {
    font-size: 18px;
    margin-bottom: 15px;
    opacity: 0.9;
}

.balance-info .amount {
    font-size: 42px;
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-info {
    background: white;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.info-item {
    padding: 15px 0;
    border-bottom: 1px solid #eee;
}

.info-item:last-child {
    border-bottom: none;
}

.info-item .label {
    color: #606266;
    font-size: 16px;
}

.info-item .value {
    color: #2c3e50;
    font-size: 16px;
}

button {
    background: #409EFF;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

button:hover {
    background: #66b1ff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(64, 158, 255, 0.3);
}
/* 添加在每个组件的 style 标签内的开头 */
* {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

input, 
button, 
select, 
textarea {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    cursor: pointer;
}

input, 
textarea {
    cursor: text;
}
</style scoped>
